<extend name="Layout/index" />
<block name="link">
	<link rel="stylesheet" href="__PUBLIC__/component/page.css">
	<style>
	.proval{
		margin-top:10px;
	}
	</style>
</block>
<block name="breadcrumb-01">
	<li>
		<i class="icon-home home-icon"></i>
		<a href="#">首页</a>
	</li>
	<li class="active">属性管理</li>
</block>

<block name="breadcrumb-02">
<div>
		<ul class="nav nav-pills" style="height:50px" role="tablist">
			  <li role="presentation" ><a href="<{:U('Property/index')}>">属性列表</a></li>
			  <li role="presentation" class="active"><a href="<{:U('Property/addIndex')}>">属性添加</a></li>
			  <!-- <li role="presentation"><a href="#">Messages</a></li> -->
		</ul>	
	</div>
</block>

<block name="main">	
		
	
	<div class="row">
		<div class="col-xs-12">
			<!-- PAGE CONTENT BEGINS -->

			<div class="row">
				<div class="col-xs-12">
					<div class="table-responsive">
						<form action="<{:U('Property/add')}>" method="post" enctype="multipart/form-data">
						<table id="sample-table-1" class="table table-striped table-bordered table-hover">
							<tbody>
								<tr>
									<td style="text-align:right;">商品分类：</td>
									<td>
									<select name="cid" id="">
									<volist name="arr" id="firstCat">
										<option <notempty name="firstCat['child']">disabled</notempty> value="<{$firstCat['id']}>">
									       <php>echo $firstCat['html'].$firstCat['name']</php>
										</option>		
										<volist name="firstCat['child']" id="secCat">
											<option <notempty name="secCat['child']">disabled</notempty> value="<{$secCat['id']}>" >
											   <php>echo $secCat['html'].$secCat['name']</php>
											</option>
										</volist>
										<volist name="secCat['child']" id="thdCat">
											<option <notempty name="thdCat['child']">disabled</notempty> value="<{$thdCat['id']}>" >
											   <php>echo $thdCat['html'].$thdCat['name']</php>
											</option>
										</volist>	
									</volist>	
									</select>
									</td>
								</tr>
								<tr>
									<td style="text-align:right;">属性名称：</td>
									<td><input type="text" style="width:40%;" name="property" value=""><label style="display:none" for="" class="text-danger">属性名称已经存在</label><label id="emprolabel" class="text-danger" style="display:none">属性名不能为空</label></td>
								</tr>
								<tr>
									<td style="text-align:right;">属性值：</td>
									<td>
									<div class="proval">
										<input type="text" name="val[]"><input value="移除" class="btn btn-danger btn-sm m-l-10 m-t-3 del-attr-value" type="button"><label style="display:none" for="" class="text-danger"r>属性值不能为空</label>
									</div>
									<div class="proval">
										<input type="text" name="val[]"><input value="移除" class="btn btn-danger btn-sm m-l-10 m-t-3 del-attr-value" type="button">
										<label style="display:none" for="" class="text-danger"r>属性值不能为空</label>
									</div>
									<div class="proval">
										<input type="text" name="val[]"><input value="移除" class="btn btn-danger btn-sm m-l-10 m-t-3 del-attr-value" type="button">
										<label style="display:none" for="" class="text-danger"r>属性值不能为空</label>
									</div>

									<a id="add_attribute_value" href="javascript:void(0);" class="btn btn-warning btn-sm">
									<i class="fa fa-plus"></i>
									<!-- 继续添加属性值 -->
									继续添加属性值
									</a>
						<div class="simple-form-field">
							<div class="form-group">
								<label for="" class="col-sm-4 control-label"></label>
								<div class="col-sm-8 col-sm-pull-4">
									<div class="form-control-box">

											<input class="btn btn-primary" id="btn_submit" name="btn_submit" value="确认提交" type="submit">
											
									</div>
									<div class="help-block help-block-t"></div>
								</div>
							</div>
					    </div>
									</td>
								</tr>
							</tbody>
						</table>
						
						</form>
					</div><!-- /.table-responsive -->
				</div><!-- /span -->
			</div><!-- /row -->
		</div><!-- /.col -->
	</div><!-- /.row -->
</block>


<block name="end">
	<script>
		//添加属性值框
		var flag1 = true;
		$('#add_attribute_value').click(function(){
			$(this).before('<div class="proval"><input type="text" name="val[]"><input value="移除" class="btn btn-danger btn-sm m-l-10 m-t-3 del-attr-value" type="button"><label style="display:none" for="" class="text-danger"r>属性值不能为空</label></div>');
		})

		//去除属性框
		$('.table-responsive').delegate('.del-attr-value','click',function(){
			$(this).parent().remove();
		})
		
		$('.table-responsive').find('option:disabled').css({
			color:'##5286F0'
		})

		$('.table-responsive').find('option:not(:disabled)').css({
			color:'blue'
		})

		function checkproval(){
			var flag = true;
			$.each($('input[type="text"]'),function(i){
				if($(this).val().length==0){
					$(this).next().next().show();
					flag =false;
				}else{
					$(this).next().next().hide();
					flag =true;
				}
			})
			return flag;
		}

		$('input[name="property"]').blur(function(){
			var that =$(this);
			if(that.val().length==0){
				$('#emprolabel').show();
				flag1=false;
				return flag1;
			}else{
				$('#emprolabel').hide();
				$.ajax({
				url:"<{:U('Property/checkPro')}>",
				type:'post',
				data:{proname:$(this).val(),cid:$('select').find(':selected').val()},
				dataType:'json',
				async:false,
				success:function(data){
					if(data.code==0){
						that.next().hide();
						flag1 = true;
					}else{
						that.next().show();
						flag1 = false;
					}
				}
				})
			}
			
			return flag1;
		})

		$('#sample-table-1').delegate('input[type="text"]','blur',function(){
			if($(this).val().length==0){
				$(this).next().next().show();
			}else{
				$(this).next().next().hide();
			}
		})
		$('form').submit(function(){
			$('input[name="property"]').triggerHandler('blur');
			checkproval();
			if($('.proval').length==0){
				alert('属性值不能为空#');
				return false;
			}
			return checkproval() && flag;
		})
	</script>
</block>